<template>
	<view class="settle-div">
		<uni-popup ref="popup" type="center" border-radius="20rpx" mask-click="false" :mask="true"
			mask-background-color="rgba(0,0,0,0.4)">
			<view class="overlay">
				<view class="merchant_agreement">
					<view class="agreement-content">
						<view class="agreement-header">温馨提示</view>
						<view class="agreement-body">
							<p>亲爱的商家,感谢您一直以来的支持!为了更好地保护您的权益,同时遵守相关监管要求,我们更新了<span style="color: red;"
									@tap="onDetails($store.state.common.appConfig.mer_agreement, '商家隐私政策')">《商家隐私政策》</span>及<span
									style="color: red;"
									@tap="onDetails($store.state.common.appConfig.user_agreement, '用户协议')">《用户服务协议》</span>
							</p>
							<p>特向您说明如下:</p>
							<ol>
								<li>为向您提供基本服务,我们会根据您的授权内容,收集和使用对应的必要信息(例如联系电话,位置信息,设备信息等)。为确保服务稳定性，应用处于后台时可能会进行网络请求;
								</li>
								<li>未经您的授权同意,我们不会将您的信息共享给第三方或用于您未授权的其他用途;</li>
								<li>您可以访问,更正,删除相关个人信息,我们也提供账号注销的途径。</li>
							</ol>
						</view>
						<view class="agreement-footer">
							<span class="decline-button" @click="declineAgreement">拒绝</span>
							<span class="accept-button" @click="acceptAgreement">同意</span>
						</view>
					</view>

				</view>
			</view>
		</uni-popup>
		<view  class="progress-content" >
			<view class="progress-header">申请进度</view>
			<view class="progress-steps">
				<text class="step active">1 提交资料</text>
				<text class="step">2 平台审核</text>
				<text class="step">3 微信审核</text>
				<text class="step">4 入驻成功</text>
			</view>
			<view class="progress-description">完成以下步骤可申请入驻</view>
			<view class="progress-items">
				<view class="progress-item">
					<text>店铺信息</text>
					<text class="action" @click="goToStep('storeInfo')">去录入</text>
				</view>
				<view class="progress-item">
					<text>资质与法人</text>
					<text class="action" @click="goToStep('qualification')">去录入</text>
				</view>
				<view class="progress-item">
					<text>商户号资料</text>
					<text class="action" @click="goToStep('merchantInfo')">去录入</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {}
			}
		},
		created() {
			this.loadData()
		},
		mounted() {
			document.body.style.overflow = 'hidden';
			//弹出协议
			const hasAgreed = uni.getStorageSync('hasAgreedToAgreement');
			if (!hasAgreed) {
				this.$refs.popup.open();
			}

		},
		methods: {
			acceptAgreement() {
				uni.setStorageSync('hasAgreedToAgreement', true);
				this.$refs.popup.close();
			},
			declineAgreement() {
				uni.showToast({
					title: '您需要同意协议才能继续使用',
					icon: 'none'
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	body {
	  background-color: #ffffff; /* 设置整个页面的背景颜色为白色 */
	  height: 100%;
	  margin: 0;
	  padding: 0;
	}
	.settle-div {
		background-color: #ffffff;
		width: 100%;
	}

	.uni-popup {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		/* 黑色遮罩层，透明度为0.5 */
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}

	.merchant_agreement {
		padding: 40rpx;
		border-radius: 20rpx;
	}

	.agreement-content {
		background-color: #ffffff;
		padding: 60rpx 60rpx 0 60rpx;
		border-radius: 20rpx;
	}

	.agreement-header {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		text-align: center;
	}

	.agreement-body {
		font-size: 28rpx;
		margin-bottom: 20rpx;
	}

	.agreement-body p {
		margin-bottom: 20rpx;
	}

	.agreement-footer {
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 40rpx;
	}

	.agreement-footer span {
		border: none;
		font-size: 28rpx;
	}

	.decline-button {
		background-color: #ffffff;
	}

	.accept-button {
		background-color: #ffffff;
	}
	.progress-content {
	  padding: 40rpx;
	  background-color: #ffffff;
	  min-height: 100vh;
	}
	
	.progress-header {
	  font-size: 36rpx;
	  font-weight: bold;
	  margin-bottom: 20rpx;
	  text-align: center;
	}
	
	.progress-steps {
	  display: flex;
	  justify-content: space-between;
	  margin-bottom: 20rpx;
	}
	
	.step {
	  font-size: 28rpx;
	  color: #666666;
	}
	
	.step.active {
	  color: #ff0000;
	}
	
	.progress-description {
	  font-size: 28rpx;
	  margin-bottom: 20rpx;
	}
	
	.progress-items {
	  display: flex;
	  flex-direction: column;
	}
	
	.progress-item {
	  display: flex;
	  justify-content: space-between;
	  padding: 20rpx 0;

	}
	
	.action {
	  color: #ff0000;
	  cursor: pointer;
	}
</style>